<template>
  <div class="menu">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="16">
        <div class="app-container">
          <div class="filter-container">
            <el-input v-model="menuName" :placeholder="$t('table.menu.menuName')" class="filter-item search-item" />
            <el-button class="filter-item" type="primary" plain @click="search">
              {{ $t('table.search') }}
            </el-button>
            <el-button class="filter-item" type="warning" plain @click="reset">
              {{ $t('table.reset') }}
            </el-button>
            <el-dropdown v-has-any-permission="['menu:add','menu:delete','menu:export']" trigger="click" class="filter-item">
              <el-button>
                {{ $t('table.more') }}<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-has-permission="['menu:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>
                <el-dropdown-item v-has-permission="['menu:delete']" @click.native="deleteMenu">{{ $t('table.delete') }}</el-dropdown-item>
                <el-dropdown-item v-has-permission="['menu:export']" @click.native="exportExcel">{{ $t('table.export') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <!-- <el-tree
            ref="menuTree"
            :data="menuTree"
            :check-strictly="true"
            show-checkbox
            accordion
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            @node-click="nodeClick"
          /> -->
          <zk-table
            ref="menuTree"
            :data="menuTree"
            :columns="columns"
            :stripe="props.stripe"
            :border="props.border"
            :show-header="props.showHeader"
            :show-summary="props.showSummary"
            :show-row-hover="props.showRowHover"
            :show-index="props.showIndex"
            :tree-type="props.treeType"
            :is-fold="props.isFold"
            :expand-type="props.expandType"
            :selection-type="props.selectionType"
            sum-text="sum"
            index-text="#"
          >
            <template slot="operate" slot-scope="scope">
              <el-button type="primary" size="mini" circle @click="nodeClick(scope.row)">修改</el-button>
            </template>
          </zk-table>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ menu.menuId === '' ? this.$t('common.add') : this.$t('common.edit') }}</span>
          </div>
          <div>
            <el-form ref="form" :model="menu" :rules="rules" label-position="right" label-width="100px">
              <el-form-item :label="$t('table.menu.parentId')" prop="parentId">
                <treeselect
                  v-model="menu.parentId"
                  :multiple="false"
                  :options="menuTree"
                  :clear-value-text="$t('common.clear')"
                  placeholder=" "
                  style="width:100%"
                />
              </el-form-item>
              <el-form-item :label="$t('table.menu.menuName')" prop="menuName">
                <el-input v-model="menu.menuName" />
              </el-form-item>
              <el-form-item :label="$t('table.menu.type')" prop="type">
                <el-radio-group v-model="menu.type" :disabled="menu.menuId !== ''">
                  <el-radio label="0">{{ $t('common.menu.menu') }}</el-radio>
                  <el-radio label="1">{{ $t('common.menu.button') }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-show="menu.type === '0'" :label="$t('table.menu.icon')" prop="icon">
                <el-input v-model="menu.icon">
                  <el-button slot="append" icon="el-icon-brush" style="padding-left: 0;" @click="chooseIcons" />
                </el-input>
              </el-form-item>
              <el-form-item v-show="menu.type === '0'" :label="$t('table.menu.path')" prop="path">
                <el-input v-model="menu.path" />
              </el-form-item>
              <el-form-item v-show="menu.type === '0'" :label="$t('table.menu.component')" prop="component">
                <el-input v-model="menu.component" />
              </el-form-item>
              <el-form-item :label="$t('table.menu.perms')" prop="perms">
                <el-input v-model="menu.perms" />
              </el-form-item>
              <el-form-item v-show="menu.type === '0'" :label="$t('table.menu.orderNum')" prop="orderNum">
                <el-input-number v-model="menu.orderNum" :min="0" :max="100" @change="handleNumChange" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: -2rem;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ menu.menuId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <Icons
      :dialog-visible="iconVisible"
      @close="iconVisible = false"
      @choose="chooseIcon"
    />
  </div>
</template>
<script>
import Icons from './Icons';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import ZkTable from 'vue-table-with-tree-grid';

export default {
  name: 'MenuManage',
  components: { Icons, Treeselect },
  data() {
    return {
      props: {
        stripe: true,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: true
      },
      columns: [
        {
          label: '菜单标识',
          prop: 'id'
        },
        {
          label: '菜单名称',
          prop: 'label'
        },
        {
          label: '菜单URL',
          prop: 'component'
        },
        {
          label: '菜单PATH',
          prop: 'path'
        },
        {
          label: '菜单类型',
          prop: 'type',
          minWidth: '5px'
        },
        {
          label: '操作',
          // prop: "operate",
          type: 'template',
          template: 'operate',
          minWidth: '5px'
        }
      ],
      iconVisible: false,
      buttonLoading: false,
      selection: [],
      menuTree: [],
      menuName: '',
      menu: this.initMenu(),
      rules: {
        menuName: [
          {
            required: true,
            message: this.$t('rules.require'),
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            message: this.$t('rules.range2to10'),
            trigger: 'blur'
          }
        ],
        path: {
          max: 100,
          message: this.$t('rules.noMoreThan100'),
          trigger: 'blur'
        },
        component: {
          max: 100,
          message: this.$t('rules.noMoreThan100'),
          trigger: 'blur'
        },
        perms: {
          max: 50,
          message: this.$t('rules.noMoreThan50'),
          trigger: 'blur'
        }
      }
    };
  },
  mounted() {
    this.initMenuTree();
  },
  methods: {
    initMenuTree() {
      this.$get('system/menu').then(r => {
        this.menuTree = r.data.resultBody.rows;
      });
    },
    initMenu() {
      return {
        menuId: '',
        menuName: '',
        parentId: null,
        path: '',
        component: '',
        perms: '',
        type: '0',
        orderNum: 0,
        icon: ''
      };
    },
    exportExcel() {
      this.$download(
        'system/menu/excel',
        {
          menuName: this.menuName
        },
        `menu_${new Date().getTime()}.xlsx`
      );
    },
    // filterNode(value, data) {
    //   if (!value) return true;
    //   return data.label.indexOf(value) !== -1;
    // },
    nodeClick(row) {
      this.menu.parentId = row.parentId;
      if (this.menu.parentId === '0') {
        this.menu.parentId = null;
      }
      this.menu.orderNum = row.orderNum;
      this.menu.type = row.type;
      this.menu.perms = row.perms;
      this.menu.path = row.path;
      this.menu.component = row.component;
      this.menu.icon = row.icon;
      this.menu.menuName = row.label;
      this.menu.menuId = row.id;
      this.$refs.form.clearValidate();
    },
    handleNumChange(val) {
      this.menu.orderNum = val;
    },
    chooseIcons() {
      this.iconVisible = true;
    },
    chooseIcon(icon) {
      this.menu.icon = icon;
      this.iconVisible = false;
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          this.menu.createTime = this.menu.modifyTime = null;
          if (this.menu.menuId) {
            this.$put('system/menu', { ...this.menu }).then(() => {
              this.buttonLoading = false;
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              });
              this.reset();
            });
          } else {
            this.$post('system/menu', { ...this.menu }).then(() => {
              debugger
              this.buttonLoading = false;
              this.$message({
                message: this.$t('tips.createSuccess'),
                type: 'success'
              });
              this.reset();
            });
          }
        } else {
          return false;
        }
      });
    },
    reset() {
      this.initMenuTree();
      this.menuName = '';
      this.resetForm();
    },
    search() {
      var queryObj = {
        menuName: this.menuName
      }
      this.$post(`system/menu/list`, { ...queryObj }).then(r => {
        this.menuTree = r.data.resultBody.rows;
      });
      // this.$refs.menuTree.filter(this.menuName);
    },
    add() {
      this.resetForm();
    },
    deleteMenu() {
      const checked = this.$refs.menuTree.getCheckedProp('id');
      debugger;
      if (checked.length === 0) {
        this.$message({
          message: this.$t('tips.noNodeSelected'),
          type: 'warning'
        });
      } else {
        this.$confirm(
          this.$t('tips.confirmDeleteNode'),
          this.$t('common.tips'),
          {
            confirmButtonText: this.$t('common.confirm'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          }
        )
          .then(() => {
            debugger;
            this.menu.menuIds = checked.join(',');
            this.$delete(`system/menu/${this.menu.menuIds}`).then(() => {
              this.$message({
                message: this.$t('tips.deleteSuccess'),
                type: 'success'
              });
              this.reset();
            });
          })
          .catch(() => {
            const checked = this.$refs.menuTree.getCheckedProp([]);
          });
      }
    },
    resetForm() {
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
      this.menu = this.initMenu();
    }
  }
};
</script>
<style lang="scss" scoped>
.menu {
  margin: 10px;
  .app-container {
    margin: 0 0 10px 0 !important;
  }
}
.el-card.is-always-shadow {
  box-shadow: none;
}
.el-card {
  border-radius: 0;
  border: none;
  .el-card__header {
    padding: 10px 20px !important;
    border-bottom: 1px solid #f1f1f1 !important;
  }
}
</style>
